<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple">
                    <el-form :inline="true" label-width="100" :model="formInline" class="demo-form-inline">
                        <el-form-item label="AO编号">
                            <el-input size="mini" v-model="formInline.aoCode" placeholder="AO编号"></el-input>
                        </el-form-item>
                        <el-form-item label="工作包号">
                            <el-input size="mini" v-model="formInline.packageCode" placeholder="工作包号"></el-input>
                        </el-form-item>
                        <el-form-item label="架次">
                            <el-input size="mini" v-model="formInline.planeNo" placeholder="架次"></el-input>
                        </el-form-item>
                        <el-form-item label="分拣状态">
                            <el-select size="mini" v-model="formInline.sortingStatus" placeholder="分拣状态">
                                <el-option label="所有" value=""></el-option>
                                <el-option label="未分拣" value="00"></el-option>
                                <el-option label="分拣完成" value="02"></el-option>
                                <el-option label="初始状态" value="08"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="缺件状态">
                            <el-select size="mini" v-model="formInline.aState" placeholder="分拣状态">
                                <el-option label="所有" value=""></el-option>
                                <el-option label="A类缺件" value="A"></el-option>
                                <el-option label="非A类缺件" value="B"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="配送状态">
                            <el-select size="mini" v-model="formInline.delieveryState" placeholder="配送状态">
                                <el-option label="所有" value=""></el-option>
                                <el-option label="配送" value="04"></el-option>
                                <el-option label="部分配送" value="02"></el-option>
                                <el-option label="部分分拣" value="00"></el-option>
                            </el-select>
                        </el-form-item>
                      
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="doQuery">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple">
                    <slot>AO列表</slot>
                    <el-table :data="aoinfo.tableData" highlight-current-row border @current-change="currentDataChange" height="300" stripe style="width: 100%" highlight-current-row>
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="sortingStatusName"  label="分拣状态" width="100"></el-table-column>
                        <el-table-column prop="stateName"  label="缺件状态" width="100"></el-table-column>
                        <el-table-column prop="aoCode"  label="AO号" width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="aoName"  label="AO名称" width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="station"  label="站位" width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="planeNo"  label="架次" width="160"></el-table-column>
                        <el-table-column prop="packageCode"  label="工作包编号" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="shop"  label="单位" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="delieveryStateName"  label="配送状态" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="aStateName"  label="缺件状态" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="aoinfo.page.currentPage"
                        :page-sizes="[20, 50, 100, 500]" :page-size="aoinfo.page.pageSize" layout="total, sizes, prev, pager, next" :total="aoinfo.page.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <slot>物料清单</slot>
                    <el-table :data="billinfo.tableData" border height="300" stripe style="width: 100%" highlight-current-row>
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="itemCode"  label="图号" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="itemQty"  label="需求数量" width="160"></el-table-column>
                        <el-table-column prop="matchQty"  label="配套数量" width="160"></el-table-column>
                        <el-table-column prop="repartAss"  label="装配图号" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button  size="mini"  @click="handleEdit(scope.$index, scope.row)">添加配套</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <slot>配套清单</slot>
                    <el-table :data="matchinfo.tableData" border height="300" stripe style="width: 100%" highlight-current-row>
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="isSortName"  label="分拣状态" width="100"></el-table-column>
                        <el-table-column prop="stateName"  label="配套状态" width="100"></el-table-column>
                        <el-table-column prop="itemCode"  label="图号" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="qualityCode"  label="质量编号" width="180"></el-table-column>
                        <el-table-column prop="packageCount"  label="分拣数量" width="160"></el-table-column>
                        <el-table-column prop="itemQty"  label="需求数量" width="160"></el-table-column>
                        <el-table-column prop="matchQty"  label="分配数量" width="160"></el-table-column>
                        <el-table-column prop="repartAss"  label="装配图号" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button  size="mini"  @click="remmoveMatchInfo(scope.$index, scope.row)">删除配套</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <template>
            <el-drawer title="手动配套" size="90%" :visible.sync="drawerMatch.drawer" :direction="drawerMatch.direction" :before-close="handleClose">
                <el-row>
                    <el-col :span="23">
                        <slot>配套清单</slot>
                        <el-form :inline="true"  class="demo-form-inline" style="margin-left:20px">
                            <el-col :span="8">
                                <el-form-item label="AO号："><span>{{ drawerMatch.billInfo.aoCode }}</span></el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="图号："><span>{{ drawerMatch.billInfo.itemCode }}</span></el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="图号名称："><span>{{ drawerMatch.billInfo.itemName }}</span></el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="装配图号："><span>{{ drawerMatch.billInfo.repartAss }}</span></el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="需求数量："><span>{{ drawerMatch.billInfo.itemQty }}</span></el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="状态名称："><span>{{ drawerMatch.billInfo.stateName }}</span></el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="分厂："><span>{{ drawerMatch.billInfo.shop }}</span></el-form-item>
                            </el-col>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <slot>配套信息</slot>
                        <el-table :data="drawerMatch.matchData" border height="600" stripe style="width: 100%" highlight-current-row>
                            <el-table-column prop="itemCode"  label="图号" width="160" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="qualityCode"  label="质量编号" width="160" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="itemQty"  label="需求数量" width="140" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="matchQty"  label="配套数量" width="140" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="stateName"  label="状态" width="140" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="addTypeName"  label="手动配套标识" width="220" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="repartAss"  label="装配图号" width="160" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="workbinCode"  label="缓存箱" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="16">
                        <slot>库存</slot>
                        <el-table :data="drawerMatch.InventoryData" border height="600" stripe style="width: 100%" highlight-current-row>
                            <el-table-column label="操作" width="120" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="addMatch(scope.$index,scope.row)">添加配套</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="aoCode"  label="AO号" width="160" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="itemCode"  label="图号" width="160" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="qualityCode"  label="质量编号" width="160" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="mProductNumber"  label="型号" width="160" show-overflow-tooltip></el-table-column>
                            
                            <el-table-column prop="itemQty"  label="台账数量" width="140" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="mesCheckQualiticationId"  label="合格证号" width="140" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="workbinCode"  label="缓存箱" width="160" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-drawer>
        </template>
    </div>
</template>
<script>
import request from '@/utils/request.js';
export default {
    name:"",
    data(){
        return {
            //查询条件
            formInline:{
                packageCode:"",
                aoCode:"",
                aState:"",
                planeNo:"",
                sortingStatus:"",
                delieveryState:""
            },
            //AO信息
            aoinfo:{
                tableData:[],
                page:{
                    currentPage:1,
                    total:0,
                    pageSize:20
                },
                currentData:{}
            },
            //物料清单信息
            billinfo:{
                tableData:[]
            },
            //配套信息
            matchinfo:{
                tableData:[]
            },
            drawerMatch:{
                drawer:false,
                direction: 'rtl',
                matchData:[],
                InventoryData:[],
                billInfo:{aoCode:"",itemCode:"",itemName:"",itemQty:"",repartAss:"",stateName:"",msAoMatchBillId:"",
                        packageCode:"",productCode:"",batchNo:"",planeNo:""}
            }
        }
    },
    methods:{
        doQuery(){//查询AO清单
            request.post("/packageAoQueryRest/queryAo",{page:this.aoinfo.page,queryParam:this.formInline}).then((res)=>{
                this.aoinfo.tableData = res.data.list;
                this.aoinfo.page.total = res.data.total;
            });
        },
        loadMatchInfo(){//加载配套清单
            request.post("/packageAoQueryRest/searchAoMatchById",this.aoinfo.currentData).then((res)=>{
                if(res.data.retCode=="500"){
                    this.matchinfo.tableData = [];
                }else{
                    this.matchinfo.tableData = res.data;
                }
            });
        },
        loadBillInfo(){//加载配套清单
            request.post("/packageAoQueryRest/searchAoBillById",this.aoinfo.currentData).then((res)=>{
                console.log("res",res);
                if(res.data.retCode=="500"){
                    this.billinfo.tableData = [];
                }else{
                    this.billinfo.tableData = res.data;
                }
            });
        },
        handleCurrentChange(val){
            this.aoinfo.page.currentPage = val;
            this.$options.methods.doQuery.bind(this)();
        },
        handleSizeChange(val){
            this.aoinfo.page.pageSize = val;
            this.$options.methods.doQuery.bind(this)();
        },
        currentDataChange(currentRow, oldCurrentRow){
            this.aoinfo.currentData = currentRow;
            this.$options.methods.loadMatchInfo.bind(this)();
            this.$options.methods.loadBillInfo.bind(this)();
        },
        handleEdit(index,row){//重新配套
            this.drawerMatch.drawer = true;
            row.shop = this.aoinfo.currentData.shop;
            this.drawerMatch.billInfo = {};
            this.drawerMatch.matchData = [];
            this.drawerMatch.InventoryData = [];
            request.post("/packageAoQueryRest/searchHandleMatchInfo",row).then((res)=>{
                this.drawerMatch.billInfo = res.data.billInfo;
                this.drawerMatch.matchData = res.data.matchInfos;
                this.drawerMatch.InventoryData = res.data.workbins;
            });
        },
        handleClose(done){
            done();
        },
        addMatch(index,row){//手动配套
            this.$prompt('请输入配套数量', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
                }).then(({ value }) => {
                    var match  =row;
                    match.matchQty = value;
                    match.msAoMatchBillId = this.drawerMatch.billInfo.msAoMatchBillId;
                    match.packageCode = this.drawerMatch.billInfo.packageCode;
                    match.aoCode = this.drawerMatch.billInfo.aoCode;
                    match.productCode = this.drawerMatch.billInfo.productCode;
                    match.batchNo = this.drawerMatch.billInfo.batchNo;
                    match.planeNo = this.drawerMatch.billInfo.planeNo;
                    request.post("/packageAoQueryRest/handleMatch",match).then((res)=>{
                        console.log("res",res);
                        this.$Alert({message:res.data.message,type:"info",title:"提示"});
                        this.drawerMatch.drawer = false;

                    });
                }).catch(() => {
                    this.$message({  type: 'info', message: '取消输入'});       
                });
        },
        remmoveMatchInfo(index,row){
            if(row.isSort=="Y"){
                this.$Alert({message:"请选择未分拣的",type:"error",title:"失败"});
                return;
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
                .then(()=>{
                    request.post("/packageAoQueryRest/remmoveMatchInfo",row).then((res)=>{
                       console.log("res",res);
                       if(res.data.retCode=="200"){
                        this.$Alert({message:"操作成功",type:"success",title:"成功"});    
                       }else{
                        this.$Alert({message:"操作失败",type:"error",title:"失败"});
                       }
                       this.$options.methods.loadMatchInfo.bind(this)();
                    });
                }).catch(()=>{
                    console.log("取消");
                })
        }
        
    }
}
</script>